<template>
	<!-- 一个地址 -->
	<div class="address">
		<div class="user">
			<!-- 用户姓名 手机号 -->
			<div>
				<div>姓名：{{address.aname}}</div>
				<div>{{address.phone}}</div>
			</div>
			<!-- 详细地址 -->
			<div>{{address.deaddress}}</div>
		</div>
		<!-- 地址操作 -->
		<div class="edit">
			<div>
				<div class="checkbox">
					<!-- 不勾选 -->
						<svg
							v-show="!checked"
							t="1648305130039"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="5965"
							width="15"
							height="15"
						>
						<path
						d="M128 64a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64H128z m0-64h768a128 128 0 0 1 128 128v768a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128z"
						fill="#d3d3d3"
						p-id="5966"></path>
          				</svg>
						<!-- 勾选 -->
						<svg
							v-show="checked"
							t="1648304531164"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="3969"
							id="mx_n_1648304531164"
							width="15"
							height="15"
						>
							<path
							d="M0 0m128 0l768 0q128 0 128 128l0 768q0 128-128 128l-768 0q-128 0-128-128l0-768q0-128 128-128Z"
							fill="#9a4145"
							p-id="3970"
							data-spm-anchor-id="a313x.7781069.0.i7"
							class="selected"
							></path>
							<path
							d="M212.032 420.8l196.672 198.528 360.192-367.552 83.968 84.8-444.16 452.48L128 505.728z"
							fill="#ffffff"
							p-id="3971"
							data-spm-anchor-id="a313x.7781069.0.i9"
							class=""
							></path>
          			</svg>
				</div>
				<span :class="{checked}" @click="checkDefault">默认地址</span>
			</div>
			<div>
				<div>编辑</div>
				<div>删除</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:['address'],
		data() {
			return {
				checked: this.address.is_default //是否为默认地址
			}
		},
		methods:{
			// 更改地址是否为默认地址
			checkDefault(){
				this.checked=!this.checked
				// 请求，更改数据库中的标识是否为默认地址
				const {sid,aid} = this.address
				const url = 'api/users/is_default'
				const params={userId:sid,addressId:aid,is_default:this.checked}
				this.axios.put(url,params).then(res => {
					// 设置为默认地址成功
					if(this.checked == true && res.data.code==200) {
						this.$dialog.alert({
							message:'成功将该地址设置为默认地址',
							confirmButtonText:'好的',
							confirmButtonColor: "#9a4145"
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.address {
	border: 1px solid #aaafb5;
	border-radius: 0.312em;
	padding: .615em;
	margin:0 0.315em;
	margin-bottom: 0.615em;
	.user {
		border-bottom: 1px solid #aaafb5;
		>div {
			padding-bottom: .615em;
			// 用户姓名，手机号
			&:first-child {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
			}
			// 详细地址
			&:nth-child(2){
				font-size: .9em;
				color: #aaafb5;
			}
		}
	}
	// 地址操作
	.edit {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 0.615em;
		>div {
			// 默认地址
			&:nth-child(1){
				display: flex;
				align-items: center;
				.checkbox {
					display: block;
					margin-right: 0.315em;
				}
				>span.checked {
					color: #9a4145;
				}
			}	
			// 编辑删除按钮
			&:nth-child(2){
				display: flex;
				>div {
					padding: 0 0.615em;
					color: #aaafb5;
					font-size: .9em;
				}
			}
		}
	}
}
</style>